{% from "govuk/components/back-link/macro.njk" import govukBackLink %}

{% extends "layouts/examples.njk" %}

{% block beforeContent %}
  {{ govukBackLink({
    href: "/"
  }) }}
{% endblock %}

{% block content %}
  <h1 class="govuk-heading-l">Example: Grid layout</h1>
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <h2 class="govuk-heading-m">Two thirds</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
    <div class="govuk-grid-column-one-third">
      <h2 class="govuk-heading-m">One third</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
  </div>
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-one-third">
      <h2 class="govuk-heading-m">One third</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
    <div class="govuk-grid-column-one-third">
      <h2 class="govuk-heading-m">One third</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
    <div class="govuk-grid-column-one-third">
      <h2 class="govuk-heading-m">One third</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
  </div>
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-one-half">
      <h2 class="govuk-heading-m">One half</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
    <div class="govuk-grid-column-one-half">
      <h2 class="govuk-heading-m">One half</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
  </div>
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-one-quarter">
      <h2 class="govuk-heading-m">One quarter</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
    <div class="govuk-grid-column-one-quarter">
      <h2 class="govuk-heading-m">One quarter</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
    <div class="govuk-grid-column-one-quarter">
      <h2 class="govuk-heading-m">One quarter</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
    <div class="govuk-grid-column-one-quarter">
      <h2 class="govuk-heading-m">One quarter</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
  </div>
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-three-quarters">
      <h2 class="govuk-heading-m">Three-quarters</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
    <div class="govuk-grid-column-one-quarter">
      <h2 class="govuk-heading-m">One quarter</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
  </div>
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-one-half govuk-grid-column-three-quarters-from-desktop">
      <h2 class="govuk-heading-m">One half (three quarters from desktop)</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>

    <div class="govuk-grid-column-one-half govuk-grid-column-one-quarter-from-desktop">
      <h2 class="govuk-heading-m">One half (one quarter from desktop)</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
  </div>
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-three-quarters govuk-grid-column-two-thirds-from-desktop">
      <h2 class="govuk-heading-m">Three quarters (two thirds from desktop)</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
  </div>
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds-from-desktop">
      <h2 class="govuk-heading-m">Two thirds from desktop</h2>
      <p class="govuk-body">
        This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
      </p>
    </div>
  </div>
{% endblock %}
